<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box{width:20px;height:20px;font-size: 12px;text-align: center;line-height:20px;background: #000;color:#fff;position: absolute;left:0;top:0;display: none;}
    </style>
</head>
<body>
    <input type="text" id="txt1">
    <input type="text" id="txt2">
    <input type="text" id="txt3">
    <input type="button" id="btn" value="添加">

    <table width="400" align="center" border="1">
        <thead>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
<script>
    var btn = document.querySelector("#btn");
    var txt1 = document.querySelector("#txt1");
    var txt2 = document.querySelector("#txt2");
    var txt3 = document.querySelector("#txt3");
    var tbody = document.querySelector("table tbody");

    btn.onclick = function(){
        // 创建元素
        var td1 = document.createElement("td");
        var td2 = document.createElement("td");
        var td3 = document.createElement("td");
        var td4 = document.createElement("td");
        var tr = document.createElement("tr");

        // 设置元素内容
        td1.innerHTML = txt1.value;
        td2.innerHTML = txt2.value;
        td3.innerHTML = txt3.value;
        td4.innerHTML = "删除";

        // 插入到指定容器
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);
        tr.appendChild(td4);
        tbody.appendChild(tr);
        
        // 给删除所在的单元格绑定事件，删除当前所在的tr
        td4.onclick = function(){
            // tr.remove();
            td4.parentNode.remove();
        }
    }


    // =========

    // 准备存储一连串元素
    var divs = [];
    for(var i=1;i<=10;i++){
        // 创建元素
        var div = document.createElement("div")
        // 插入页面
        document.body.appendChild(div);
        // 设置内容
        div.innerHTML = i;
        // 设置样式
        div.className = "box";
        // 存储到数组
        divs.push(div);
    }

    // 记录鼠标移动的多少次
    var n = 0;
    // 移动事件
    document.onmousemove = function(eve){
        // 鼠标移动的次数如果在数组索引范围内
        if(n < divs.length){
            // 显示对应的元素
            divs[n].style.display = "block";
            // 索引增加
            n++;
        }

        // 开始移动

        // 从后向前，将后一个元素的位置，设置为前一个元素的位置
        for(var i=divs.length-1; i>0; i--){
            divs[i].style.left = divs[i-1].offsetLeft + "px";
            divs[i].style.top = divs[i-1].offsetTop + "px";
        }
        
        // 获取事件对象
        var e = eve || window.event;
        
        // 最后控制第一个元素跟随鼠标移动
        divs[0].style.left = e.pageX + "px";
        divs[0].style.top = e.pageY + "px";
    }


    
</script>
</html>